<template>
    <div class="heat-container">
        <!-- 加载中 -->
        <loading :is-loading="load" />

        <div class="plan-body">
            <!-- 顶部 -->
            <div class="top" style="display: flex;align-items: center;height: 60px;">
                景点类型： <el-select v-model="value" placeholder="默认全部">
                    <el-option v-for="item in options" :key="item.categoryId" :label="item.categoryName"
                        :value="item.categoryId">
                    </el-option>
                </el-select>
                <el-button style="margin-left: 20px;" type="primary" plain @click="change()">搜索</el-button>
                <div class="search" style="margin-left: 50px;">
                    <input
                        style="height: 30px;border: 2px rgb(141, 139, 139) solid;border-radius: 5px;outline: none;padding-left: 10px;margin-right: 20px;"
                        type="text" v-model="address" placeholder="搜索景点地址">
                    <el-button type="primary" plain @click="search()">搜索</el-button>
                </div>
                <div class="search" style="margin-left: 50px;">
                    <input
                        style="height: 30px;border: 2px rgb(141, 139, 139) solid;border-radius: 5px;outline: none;padding-left: 10px;margin-right: 20px;"
                        type="text" v-model="planName" placeholder="计划表名字">
                    <el-button type="primary" plain @click="add()">新增计划表</el-button>
                </div>
            </div>
            <!-- 导航栏 -->
            <div class="">

                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane style="display: flex; align-items: center; gap: 10px;" :label="item.planName" :name="item.planName" :id="item.planId"
                        v-for="item, index in navList" :key="item.planId">旅游计划：{{ item.planName }} 
                        <div class="del"
                            style="background-color: gray; width: 20px;
                            height: 20px; cursor: pointer; border-radius: 50%;color: white;
                            display: flex;justify-content: center;
                            align-items: center;
                           "
                            @click="delPlan(item.planId)">x
                        </div> 
                    </el-tab-pane>

                </el-tabs>
            </div>
            <!-- 内容 -->
            <div class="content">
                <div class="show">
                    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column label="景区名字" width="100" prop="attractionName" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="name" label="" width="120" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="address" label="地址" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="openTime" label="开放时间" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="price" label="票价" show-overflow-tooltip>
                        </el-table-column>
                    </el-table>
                    <div class="ok" style="margin-top: 20px;display: flex;justify-content: end;margin-right: 20px;">
                        <el-button @click="addPlanDetail()">添加景点</el-button>
                    </div>
                </div>
                <div class="arrList">
                    <h3>已选的景点</h3>
                    <div class="items">
                        <div class="item" v-for="item, index in arrListData" :key="index">{{ item.attractionName }}
                            <span @click="del(item.plandetailId)">x</span>
                        </div>
                    </div>
                    <div class="sub" @click="submitted()">生成旅游计划</div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import { listAttraction } from '../../api/system/attraction';
import { getCategory } from '../../api/system/category';

import { aiPlan, addPlanList, getUnPlan, getUnPlanDetail, delPlanDetail, delPlan, addPlanListDetail } from '../../api/system/ai';
import loading from '../../layout/components/loading.vue';

import Cookies from "js-cookie";
import { del } from 'vue';

export default {
    components: {
        loading
    },
    data() {
        return {
            planId: '',
            activeName: '',
            tableData: [],
            options: [],
            value: null,
            address: '',
            navList: [],
            query: {
                pageNum: 1,
                pageSize: 999,
                status: 2,
                categoryId: 0,
                address: null,
            },
            load: false,
            planName: '',
            arrListData: []
        }
    },
    methods: {
        // 添加景点
        addPlanDetail() {
            console.log(this.filteredVal);
            console.log(this.activeName,123123);
            if(this.activeName != 0){

                this.filteredVal.map(res => {
                    this.addPlanListDetail(res.attractionId, this.planId)
                })
            }else{
                this.$message({
                    message: '请先选择（若无请先添加）计划表名字',
                    type: 'warning'
                });
            }
        },
        // 添加景点详情
        addPlanListDetail(attractionId, planId) {
            addPlanListDetail({ attractionId, planId }).then(res => {
                this.load = true
                this.listAttraction()
                this.getUnPlan()
                setTimeout(() => {
                    this.processing()
                }, 1000);

            }
            )
        },
        // 处理已选景点
        processing() {
            // let data = []
            // data = this.arrListData.map(item => {
            //     return this.tableData.some(i => i.attractionName === item.attractionName)
            // })
            let data = this.tableData.filter(item =>
                this.arrListData.some(arrItem =>
                    item.attractionName === arrItem.attractionName
                )
            );
            // this.load = false
            console.log(data);
            this.toggleSelection(data)
        },

        // 点击导航栏
        handleClick(tab, event) {
            console.log(tab, event);
            this.getUnPlanDetail(tab.name)
        },
        // 获取景点列表
        getAttraction() {
            listAttraction(this.query).then(res => {
                this.tableData = res.rows
            }
            )
        },
        // 切换选中状态
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                    this.load = false
                });
            } else {
                this.$refs.multipleTable.clearSelection();
                this.load = false

            }
        },
        // 删除计划表
        delPlan(id) {
            delPlan(id).then(res => {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
                this.getUnPlan()
                
            })
        },

        // 删除景点
        del(id) {
            delPlanDetail(id).then(res => {
                this.load = true
                this.getUnPlanDetail()
                
                this.listAttraction()
                this.getUnPlan()
                setTimeout(() => {
                    this.processing()
                }, 1000);

                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
            })
        },
        // 获取未计划的景点详情
        getUnPlanDetail(id) {
            if (id) {
                getUnPlanDetail(id).then(res => {
                    console.log(res);
                    this.arrListData = res.data
                    this.planId = id
                })
            } else {
                if(this.navList.length !== 0){
                    getUnPlanDetail(this.navList[0].planId).then(res => {
                        console.log(res);
                        this.arrListData = res.data
                        this.planId = this.navList[0].planId
                    })
                }
            }
        },
        // 获取未计划景点
        getUnPlan() {
            getUnPlan(Cookies.get('Id')).then(res => {
                this.navList = res.data
                console.log(res.data);
                if(res.data.length !== 0){
                    this.activeName = res.data[0].planName
                }
                this.getUnPlanDetail()
            })
        },
        // 点击导航栏
        handleClick(tab, event) {
            this.getUnPlanDetail(tab.$attrs.id)
        },
        // 添加计划表
        add() {
            if(this.planName){
                addPlanList({ planName: this.planName, userId: Cookies.get('Id') }).then(res => {
                this.$message({
                    message: '生成成功',
                    type: 'success'
                });
                this.planName = ''
                this.getUnPlan()

            })
            }else{
                this.$message({
                    message: '请先输入计划表名字',
                    type: 'error'
                });
            }
           
        },
        // 搜索
        search() {
            this.load = true
            this.query.categoryId = this.categoryId
            this.query.address = this.address
            this.value = ''
            console.log(this.query.categoryId);

            this.listAttraction()
        },
        // 切换景点类型
        change() {

            this.address = ''
            this.query.address = ''
            this.load = true
            if (!this.value) {
                this.query.categoryId = 0
            } else {

                this.query.categoryId = this.value
                console.log(this.query.categoryId);

            }
            this.listAttraction()
        },
        // 选中景点
        handleSelectionChange(val) {
            console.log(val);
            // console.log(data);
            this.filteredVal = val.filter(valItem =>
                !this.arrListData.some(arrItem => arrItem.attractionName === valItem.attractionName)
            );
            // console.log(filteredVal);
            // this.addPlanListDetail(val.attractionId, this.planId)
            this.multipleSelection = val
        },
        // 生成旅游计划
        submitted() {
            if(this.arrListData.length !== 0){
                this.load = true
                this.aiPlan(this.planId)
            }else{
                this.$message({
                    message: '请先选择景点',
                    type: 'warning'
                });
            }
        },
        // 生成旅游计划
        aiPlan(planId) {
            aiPlan(planId).then(res => {
                console.log(res);
                // this.getPlan()
                this.load = false
                this.$message({
                    message: '生成成功',
                    type: 'success'
                });
                this.$router.push({ path: '/user/myPlan' })
            })
        },
        // 获取景点列表
        listAttraction() {

            this.query.categoryId ? this.query.categoryId : this.query.categoryId = 0
            listAttraction(this.query).then(res => {
                this.tableData = res.data.list
                this.load = false
            })
        },
        // 获取景点类型
        getCategory() {
            getCategory().then(res => {
                this.options = res.data
            })
        },

    },
    created() {
        // this.loading = true
        this.getCategory()
        this.listAttraction()
        this.getUnPlan()
        setTimeout(() => {
            this.processing()
        }, 1000);
    }
}

</script>

<style lang='scss'>
.heat-container {
    margin-top: 50PX;
    display: flex;
    flex-direction: column;
    gap: 100px;
    height: 100vh;

    .del{
        &:hover{
            cursor: pointer;
            background-color: black !important;
            color: white !important;
        }
    }

    .plan-body {
        z-index: 1 !important;
        flex: 0.8;
        display: flex;
        flex-direction: column;
        gap: 50px;
        margin: 0 200px;

        .nav-list {
            width: 250px;
            // border: 2px black solid;
            height: 100%;

            .search {
                width: 100%;
                height: 40px;
                margin-bottom: 50px;
                display: flex;
                gap: 20px;

                input {
                    border: 2px rgb(141, 139, 139) solid;
                    padding-left: 10px;
                    box-sizing: border-box;
                    width: 70%;
                    height: 100%;
                    // border: none;
                    border-radius: 5px;

                    outline: none;
                }
            }

            .nav {
                font-size: 20px;
                // text-align: center;
                width: 100px;
                color: gray;
                line-height: 30px;
                height: 30px;

                // border-bottom: 2px black solid;
                // width: 100%;
                &:hover {
                    cursor: pointer;
                    color: rgba($color: #3366FF, $alpha: 1.0) !important;


                }
            }
        }

        .content {
            width: 100%;
            border: 1px white solid;

            overflow: auto;
            position: relative;
            display: flex;
            gap: 50px;

            .arrList {
                flex: 1;
                border: 1px rgb(0, 0, 0) solid;
                height: 600px;
                display: flex;
                flex-direction: column;
                align-items: center;
                overflow: auto;
                position: relative;
                padding: 0 10px;
                .sub{
                    position: absolute;
                    bottom: 20px;
                    right: 30px;
                    border: 1px solid black;
                    padding: 10px;
                    border-radius: 10px;
                    &:hover{
                        cursor: pointer;
                        background-color: rgba(141, 139, 139, 0.1);
                    }
                }
                .items {
                    width: 40%;
                    height: 70%;
                    overflow: auto;
                    display: flex;
                    // flex-direction: column;
                    align-content: flex-start;
                    gap: 20px;
                    padding: 10px;
                    // box-sizing: border-box;
                    box-sizing: border-box;
                    margin-top: 10px;

                    // height: 100%;
                    .item {
                        // height: 50px;
                        // flex: 1;
                        height: 40px;
                        display: flex;
                        justify-content: space-between;
                        width: 100%;
                        background-color: rgba($color: #3366FF, $alpha: 1.0);
                        color: white;
                        &:hover{
                            cursor: pointer;
                            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
                        }

                    }
                }
                .items {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    gap: 20px;
                    padding: 10px;
                    box-sizing: border-box;
                    // border-top: 1px solid black;
                    

                    // height: 100%;
                    .item {
                        padding: 10px;
                        font-size: 14px;
                        border-radius: 10px;
                        border: 1px rgb(0, 0, 0) solid;
                        margin-right: 10px;

                        span {
                            cursor: pointer;
                            padding: 0 2px;
                            background-color: rgba($color: #3366FF, $alpha: 1.0);
                            color: white;
                            border-radius: 50%;

                            &:hover {
                                background-color: rgba($color: #ffffff, $alpha: 1.0);
                                color: black;
                            }
                        }
                    }
                }
            }

            .show {
                width: 60%;
                background-color: rgba(141, 139, 139, 0.1);
                padding: 20px;
                box-sizing: border-box;
                height: 600px;
                overflow: auto;
                margin-bottom: 20px;
            }

            .ok {
                position: sticky;
                bottom: 0px;
                right: 20px;
            }

            .el-table tr {
                background-color: rgba(141, 139, 139, 0.1) !important;
            }

        }

    }
}
</style>